<template>
	<div class="custom_tab" style="height: 34px;">
		<ul class="custom_tab_ul" ref="tabRef">
			<li ref="tabsRef" v-for="item in tabs" :key="item.id"
				:class="['custom_tab_li', { custom_tab_item_active: activeId === item.id }]"
				@click="handleTabClick(item)">
				<div class="custom_tab_item">
					<img class="tab_item" :src="tabIcon(item)" />
					<span>{{ displayName(item.name) }}</span>
				</div>
			</li>
		</ul>

		<!-- 右侧菜单插槽 -->
		<slot name="right-menu">
		</slot>
	</div>
</template>

<script setup lang="ts">
import { ref, computed, type PropType, defineExpose, defineProps, defineEmits } from 'vue';
import { unserialize } from '@/utils/useStoreMethods';
import { joinURL } from '@/utils/publicMethods'

type TabItem = {
	id: number | string;
	paneKey: string;
	name: string;
	icon_h5?: string;
	icon_h5_before?: string;
};

const props = defineProps({
	tabs: {
		type: Array as PropType<TabItem[]>,
		required: true,
		validator: (tabs: TabItem[]) => tabs.every((t) => t.id !== undefined),
	},
	activeId: {
		type: [Number, String] as PropType<number | string>,
		required: true,
	},
	iconBaseUrl: {
		type: String,
		default: '',
	},
});

const emit = defineEmits<{
	(e: 'tab-click', item: TabItem): void;
}>();

// 图标处理逻辑
const tabIcon = computed(() => (item: TabItem) => {
	const isSpecialTab = [0, -1].includes(Number(item.id));
	const icon = props.activeId === item.id ? item.icon_h5 : item.icon_h5_before;

	return isSpecialTab ? icon : joinURL(props.iconBaseUrl, icon);
});

// 名称显示处理
const displayName = (name: string) => {
	return unserialize(name, false) || name;
};

// 点击处理函数
const handleTabClick = (item: TabItem) => {
	emit('tab-click', item);
	// scrollToTab(item.id);
};

// 滚动逻辑
const tabRef: any = ref()
const tabsRef: any = ref()
const scrollToTab = (tabId: number | string, time = 500) => {
	if (tabRef.value) {
		const index = props.tabs.findIndex((a: any) => a.id == tabId)
		const targetTab = tabsRef.value[index];
		if (targetTab) {
			targetTab.scrollIntoView({
				behavior: time > 0 ? 'smooth' : 'auto',
				block: 'center', // 滚动到屏幕中间
				inline: 'center', // 横向居中
			});
		}
	}
};

defineExpose({
	scrollToTab
});
</script>

<style scoped lang="scss">
.custom_tab {
	--active-color: #5b6cff;
	--inactive-color: #c6c4f5;
	--border-color: #501dc0;

	width: 100%;
	padding: 0 15px;
	display: flex;
	align-items: center;
	opacity: 1;
	gap: 12px;
	transition: all cubic-bezier(0.33, 0, 0.67, 1) .4s;

	&_ul {
		flex: 1;
		opacity: 1;
		height: 34px;
		display: flex;
		overflow-x: auto;
		scrollbar-width: none;
		margin-bottom: 4px;
		opacity: 1;
	transition: all cubic-bezier(0.33, 0, 0.67, 1) .4s;

		/* Firefox */
		&::-webkit-scrollbar {
			display: none;
			/* Chrome/Safari */
		}

		.custom_tab_li {
			position: relative;
			// padding: 0 8px;
			margin: 0 10px 0 10px;
			flex-shrink: 0;
			cursor: pointer;
			transition: color 0.2s;

			.custom_tab_item {
				display: flex;
				align-items: center;
				height: 100%;
				color: var(--inactive-color);
				font-size: 14px;
				font-weight: 400;

				.tab_item {
					width: 14px;
					height: 14px;
					margin-right: 3px;
					object-fit: contain;
				}
			}

			&.custom_tab_item_active {
				.custom_tab_item {
					color: var(--active-color);
				}

				&::after {
					content: '';
					position: absolute;
					bottom: 1px;
					left: 0;
					right: 0;
					height: 2px;
					background: linear-gradient(180deg, #5B6CFF 0%, #9E1EFF 100%);
					border-radius: 2px;
				}
			}

			&:last-child {
				margin-right: 0;
			}
		}
	}
}
</style>
